<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-5</title>
    <style>
        section {
            height: 130px;
            width: 500px;
            /* background-color: red; */
        }
        
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
            float: left;
            margin: 10px 10px;
            font-size: 30px;
            padding: 23px 15px;
            box-sizing: border-box;
            color: red;
        }
        
        p {
            font-size: 70px;
        }
    </style>
</head>

<body>
    <p>距离光棍节还有</p>
    <section>
        <div class="day">16天</div>
        <div class="hour">09时</div>
        <div class="minute">30分</div>
        <div class="second">20秒</div>
    </section>
    <script>
        /*  熟悉所有内置方法才能写出合要求的函数，就像创造一个东西能用的工具越多越好 */


        window.setInterval(countDown, 1000);
        /*  window.setInterval(countDown('2020-11-11 01: 00: 00'), 1000); 
        这个是错的,因为文档规定的set interval不能传递参数*/


        function countDown() {
            var inputtime = +new Date('2020-11-11 01: 00: 00');
            /* 返回的是总毫秒数，单位是毫秒 */
            var nowtime = +new Date();
            var allsecond = (inputtime - nowtime) / 1000;
            var days = parseInt(allsecond / 60 / 60 / 24);
            days = days < 10 ? '0' + days : days;
            var hours = parseInt(allsecond / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            var minutes = parseInt(allsecond / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = parseInt(allsecond % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;

            var day = document.querySelector('.day');
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            day.innerHTML = days + '天';
            hour.innerHTML = hours + '时';
            minute.innerHTML = minutes + '分';
            second.innerHTML = seconds + '秒';
        }
    </script>
</body>

</html>